<template>
  <el-container>
    <el-main>
      <el-table height="100%" :data="connections" border style="width: 100%;" highlight-current-row @row-dblclick="rowDbClick">
        <el-table-column prop="name" header-align="left" align="left" label="名称" width="150">
        </el-table-column>
        <el-table-column prop="provider" header-align="left" align="left" label="数据库提供者">
        </el-table-column>

        <el-table-column header-align="center" align="center" width="40">
          <template slot="header">
            <el-button type="text" icon="el-icon-circle-plus" @click="showEdit = true"></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-remove" @click="remove(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="数据库连接" :visible.sync="showEdit" @close="closeDialog" :modal="false" :close-on-click-modal="false">
        <el-container>
          <el-main>
            <el-form label-width="100px">
              <el-form-item label="连接名">
                <el-input :disabled="!editItem.newItem" v-model="editItem.name"></el-input>
              </el-form-item>
              <el-form-item label="连接提供者">
                <el-select v-model="editItem.provider">
                  <el-option v-for="item in providers"
                    :key="item.name"
                    :label="item.name + '(' + item.displayName + ')'"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="连接字符串">
                <el-input rows="5" type="textarea" v-model="editItem.connectionString"></el-input>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer">
          <el-row>
            <el-col :span="8">
              <el-button type="check" @click="test">测试连接</el-button>
            </el-col>
            <el-col :span="8" :offset="8">
              <el-button type="info" @click="showEdit = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import { mapGetters, mapState, mapActions } from 'vuex';
const STORE_MODULE = {
    "name": "dataService",
    "getters": [
      "providers",
      "connections"
    ],
    "actions": [
      "queryConnections"
    ]
};
export default {
  data () {
    return {
      queryModel:{
        parameters: {
          keyword:''
        }
      },
      editItem: {},
      showEdit: false
    }
  },
  computed: {
    ...mapGetters(STORE_MODULE.getters)
  },
  created(){
    this.init();
  },
  activated () {
    this.init();
  },
  methods:{
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    init(){
      this.editItem = {newItem:true};
    },
    closeDialog(){
      this.init();
    },
    rowDbClick(row, column, event){
      this.edit(row);
    },
    edit(row){
      this.editItem = row;
      this.showEdit = true;
    },
    remove(row){
      confirm('确认要删除'+row.name+'吗？删除之后将不可恢复，请谨慎操作！', '警告', 'warning', ()=>{

        this.$service.connection.delete({data: row}).then((response)=>{
          if (response.success){
            this.connections.remove(row);
            alert("删除成功","消息","success");
          }
          else{
            let msg = response.message || "删除失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    save(){
      let action = this.editItem.newItem ? 'create' : 'update';

      this.$service.connection[action]({data: this.editItem}).then((response)=>{
        if (response.success){
          if (this.editItem.newItem){
            this.editItem.newItem = false;
            this.connections.push(this.editItem);
          }
          alert("保存成功","消息","success", ()=>{this.showEdit = false;});

        }
        else{
          let msg = response.message || "保存失败";
          alert(msg,"消息","error");
        }
      });
    },
    test(){
      this.$service.connection.test({data:{provider: this.editItem.provider, connectionString: this.editItem.connectionString}}).then((response)=>{
        if (response.success){
          alert("连接成功","消息","success");
        }
        else{
          let msg = response.message || "连接失败";
          alert(msg,"消息","error");
        }
      });
    },
    // connectionSync(){
    //   this.$service.connection.sync().then((response)=>{
    //     if (response.Success){
    //       this.loadData();
    //       alert("同步成功","消息","success");
    //     }
    //     else{
    //       let msg = response.Message || "同步失败";
    //       alert(msg,"消息","error");
    //     }
    //   });
    // }
  }
}
</script>
